<template>
  <el-dialog v-model="visible" title="订单审核" width="500px" :before-close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" v-loading="loading">
      <el-form-item label="审核类型" prop="review_type">
        <el-select v-model="form.review_type" placeholder="请选择审核类型" style="width: 100%">
          <el-option label="到账审核" :value="1" />
          <el-option label="合同回收审核" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="审核结果" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="2">通过</el-radio>
          <el-radio :label="3">驳回</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="审核意见" prop="review_comment">
        <el-input
          v-model="form.review_comment"
          type="textarea"
          :rows="3"
          placeholder="请输入审核意见"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { orderApi, reviewApi } from '@/api/crm'
  import type { Order, Review } from '@/types/crm'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: Number,
      default: 0,
    },
  })

  const emit = defineEmits(['update:modelValue', 'success'])

  const visible = computed({
    get: () => props.modelValue,
    set: value => emit('update:modelValue', value),
  })

  const formRef = ref()
  const loading = ref(false)
  const submitting = ref(false)

  const form = reactive({
    review_type: 1,
    status: 2,
    review_comment: '',
  })

  const rules = {
    review_type: [{ required: true, message: '请选择审核类型', trigger: 'change' }],
    status: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
    review_comment: [{ required: true, message: '请输入审核意见', trigger: 'blur' }],
  }

  // 获取订单详情
  const getOrderDetail = async () => {
    if (!props.orderId) return

    loading.value = true
    try {
      const res = await orderApi.detail(props.orderId)
      const data = res.data

      // 根据订单状态设置默认审核类型
      if (data.payment_status === 1) {
        form.review_type = 1 // 到账审核
      } else if (data.contract_status === 1) {
        form.review_type = 2 // 合同回收审核
      }
    } catch (error) {
      console.error('获取订单详情失败:', error)
    } finally {
      loading.value = false
    }
  }

  // 提交表单
  const handleSubmit = async () => {
    if (!formRef.value) return

    try {
      await formRef.value.validate()

      submitting.value = true

      const submitData: Omit<Review, 'id'> = {
        target_id: props.orderId,
        target_type: 'order',
        review_type: form.review_type,
        status: form.status,
        review_comment: form.review_comment,
        user_id: 1,
      }

      await reviewApi.create(submitData)
      ElMessage.success('审核成功')

      emit('success')
      handleClose()
    } catch (error) {
      console.error('提交失败:', error)
    } finally {
      submitting.value = false
    }
  }

  // 关闭对话框
  const handleClose = () => {
    // 重置表单
    if (formRef.value) {
      formRef.value.resetFields()
    }
    Object.keys(form).forEach(key => {
      if (key !== 'review_type' && key !== 'status') {
        ;(form as any)[key] = ''
      }
    })
    form.review_type = 1
    form.status = 2

    visible.value = false
  }

  // 监听对话框显示状态
  watch(visible, newVal => {
    if (newVal && props.orderId) {
      getOrderDetail()
    }
  })
</script>

<style scoped>
  .el-form {
    padding-right: 20px;
  }
</style>
